<template>
    <view class="bank-container">
        <view class="bank-content">
            <u-empty v-if="!bankCardList.length" text="很抱歉！您暂时还没有银行卡添加" mode="list"
                icon="https://cdn.uviewui.com/uview/empty/list.png"></u-empty>

            <view v-else class="bank-list">
                <u-swipe-action v-for="(bank, index) in bankCardList" :key="index" :show="bank.show" :index="index"
                    @click="handleClick" :options="options">
                    <view class="bank-card">
                        <view class="bank-info">
                            <view class="bank-name">
                                <text class="name">{{ bank.cardbank }}</text>
                                <text class="type">{{ bank.type === 1 ? '借记卡' : '信用卡' }}</text>
                            </view>
                            <view class="bank-assets">
                                <text class="assets-text">{{ formatCardNumber(bank.cardnum) }}</text>
                            </view>
                        </view>
                    </view>
                </u-swipe-action>
            </view>
        </view>
        <view class="floating-button" @click="navigateToAdd">
            <u-icon name="plus" color="#ffffff" size="32"></u-icon>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            bankCardList: [],
            user: undefined,
            options: [
                {
                    text: '编辑',
                    style: {
                        backgroundColor: '#2979ff',
                        color: '#ffffff',
                        fontSize: '28rpx',
                        width: '120rpx'
                    }
                },
                {
                    text: '删除',
                    style: {
                        backgroundColor: '#fa3534',
                        color: '#ffffff',
                        fontSize: '28rpx',
                        width: '120rpx'
                    }
                }
            ]
        }
    },
    async onLoad() {
        this.user = await uni.getStorageSync('user')
        this.getBankCardList()
    },
    methods: {
        getBankCardList() {
            uni.request({
                url: '/api/my/bank/card',
                method: 'POST',
                data: {
                    user: this.user
                },
                success: (res) => {
                    this.bankCardList = res.data.bankCardList.map(item => ({
                        ...item,
                        show: false
                    }))
                }
            })
        },
        formatCardNumber(cardNumber) {
            return cardNumber.replace(/(\d{4})(?=\d)/g, '$1 ');
        },
        handleClick(index, position) {
            const bank = this.bankCardList[index]
            if (position === 0) {
                // 编辑操作
                uni.navigateTo({
                    url: `/pages/my/item/editBankCard?id=${bank.id}`
                })
            } else if (position === 1) {
                // 删除操作
                uni.showModal({
                    title: '提示',
                    content: '确定要删除该银行卡吗？',
                    success: (res) => {
                        if (res.confirm) {
                            this.deleteBankCard(bank.id, index)
                        }
                    }
                })
            }
        },
        deleteBankCard(id, index) {
            uni.request({
                url: '/api/my/bank/card/delete',
                method: 'POST',
                data: {
                    id: id,
                    user: this.user
                },
                success: (res) => {
                    if (res.data.code === 200) {
                        this.bankCardList.splice(index, 1)
                        uni.showToast({
                            title: '删除成功',
                            icon: 'success'
                        })
                    } else {
                        uni.showToast({
                            title: '删除失败',
                            icon: 'error'
                        })
                    }
                }
            })
        },
        navigateToAdd() {
            uni.navigateTo({
                url: '/pages/my/item/addBankCard'
            })
        }
    }
}
</script>

<style scoped>
.bank-container {
    padding: 20rpx;
}

.bank-list {
    padding: 0 20rpx;
}

.bank-card {
    background: linear-gradient(135deg, #e0f7fa, #b2ebf2);
    border-radius: 16rpx;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin: 20rpx 0;
    transition: transform 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.bank-card:hover {
    transform: scale(1.02);
}

.bank-info {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
}

.bank-name {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
}

.name {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
}

.type {
    font-size: 24rpx;
    color: #666;
    background: rgba(255, 255, 255, 0.5);
    padding: 4rpx 12rpx;
    border-radius: 8rpx;
}

.bank-assets {
    display: flex;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
}

.assets-text {
    font-size: 28rpx;
    color: #333;
    letter-spacing: 2rpx;
}

.floating-button {
    position: fixed;
    right: 40rpx;
    bottom: 40rpx;
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(135deg, #2979ff, #1a73e8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(41, 121, 255, 0.4);
    z-index: 999;
    transition: transform 0.2s ease;
}

.floating-button:active {
    transform: scale(0.95);
}
</style> 